<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Markdown 容器 | 中微子代理</title>
    <meta name="generator" content="VuePress 1.9.2">
    <link rel="icon" href="/neutrino-proxy-vuepress/img/favicon.ico">
    <meta name="description" content="一个基于 netty 的、开源的 java 内网穿透项目">
    <meta name="keywords" content="vuepress,theme,blog,vdoing">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/neutrino-proxy-vuepress/assets/css/0.styles.72eb1676.css" as="style"><link rel="preload" href="/neutrino-proxy-vuepress/assets/js/app.756733d0.js" as="script"><link rel="preload" href="/neutrino-proxy-vuepress/assets/js/2.4ec61f8d.js" as="script"><link rel="preload" href="/neutrino-proxy-vuepress/assets/js/8.91d0a5fc.js" as="script"><link rel="preload" href="/neutrino-proxy-vuepress/assets/js/3.9b2af462.js" as="script"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/10.e844da0f.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/11.3926765d.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/12.57caf953.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/13.c2fbbac4.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/14.9fbad366.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/15.fbee2b43.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/16.27f8e12a.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/17.d525cdf7.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/18.d9a38399.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/19.d4edb52d.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/20.03d66876.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/21.619151c0.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/22.786c3745.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/23.9d9a0a68.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/24.7ec310f1.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/25.6c3f2489.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/26.2c5749ba.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/27.3a946426.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/28.4cd8aa66.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/4.1e281399.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/5.a958538c.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/6.4d153b6d.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/7.7ea0385d.js"><link rel="prefetch" href="/neutrino-proxy-vuepress/assets/js/9.3494ec1e.js">
    <link rel="stylesheet" href="/neutrino-proxy-vuepress/assets/css/0.styles.72eb1676.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/neutrino-proxy-vuepress/" class="home-link router-link-active"><img src="/neutrino-proxy-vuepress/img/logo.png" alt="中微子代理" class="logo"> <span class="site-name can-hide">中微子代理</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/neutrino-proxy-vuepress/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="快速使用" class="dropdown-title"><a href="/neutrino-proxy-vuepress/pages/793dcb/" class="link-title">快速使用</a> <span class="title" style="display:none;">快速使用</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/793dcb/" class="nav-link">快速上手</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/2f674a/" class="nav-link">目录结构</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/d0d7eb/" aria-current="page" class="nav-link router-link-exact-active router-link-active">Markdown 容器</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/197691/" class="nav-link">Markdown 中使用组件</a></li><li class="dropdown-item"><h4>相关文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/8dfab5/" class="nav-link">使目录栏支持h2~h6标题</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/dd027d/" class="nav-link">如何让你的笔记更有表现力</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/2b8e22/" class="nav-link">批量操作front matter工具</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/0fc1d2/" class="nav-link">部署</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/9ae0bd/" class="nav-link">关于写文章和H1标题</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/26997d/" class="nav-link">关于博客搭建与管理</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/c5a54d/" class="nav-link">在线编辑和新增文章的方法</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="常见问题" class="dropdown-title"><a href="/neutrino-proxy-vuepress/pages/a20ce8/" class="link-title">常见问题</a> <span class="title" style="display:none;">常见问题</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/a20ce8/" class="nav-link">主题配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/f14bdb/" class="nav-link">首页配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/3216b0/" class="nav-link">front matter配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/54651a/" class="nav-link">目录页配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/1cc523/" class="nav-link">添加摘要</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/f51918/" class="nav-link">修改主题颜色和样式</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/ce175c/" class="nav-link">评论栏</a></li></ul></div></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/db78e2/" class="nav-link">演示</a></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/5d571c/" class="nav-link">案例</a></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/9cc27d/" class="nav-link">最近更新</a></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/1b12ed/" class="nav-link">关于我们</a></div> <a href="https://gitee.com/dromara/neutrino-proxy" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee地址
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><!----> <nav class="nav-links"><div class="nav-item"><a href="/neutrino-proxy-vuepress/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="快速使用" class="dropdown-title"><a href="/neutrino-proxy-vuepress/pages/793dcb/" class="link-title">快速使用</a> <span class="title" style="display:none;">快速使用</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/793dcb/" class="nav-link">快速上手</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/2f674a/" class="nav-link">目录结构</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/d0d7eb/" aria-current="page" class="nav-link router-link-exact-active router-link-active">Markdown 容器</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/197691/" class="nav-link">Markdown 中使用组件</a></li><li class="dropdown-item"><h4>相关文章</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/8dfab5/" class="nav-link">使目录栏支持h2~h6标题</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/dd027d/" class="nav-link">如何让你的笔记更有表现力</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/2b8e22/" class="nav-link">批量操作front matter工具</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/0fc1d2/" class="nav-link">部署</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/9ae0bd/" class="nav-link">关于写文章和H1标题</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/26997d/" class="nav-link">关于博客搭建与管理</a></li><li class="dropdown-subitem"><a href="/neutrino-proxy-vuepress/pages/c5a54d/" class="nav-link">在线编辑和新增文章的方法</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="常见问题" class="dropdown-title"><a href="/neutrino-proxy-vuepress/pages/a20ce8/" class="link-title">常见问题</a> <span class="title" style="display:none;">常见问题</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/a20ce8/" class="nav-link">主题配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/f14bdb/" class="nav-link">首页配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/3216b0/" class="nav-link">front matter配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/54651a/" class="nav-link">目录页配置</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/1cc523/" class="nav-link">添加摘要</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/f51918/" class="nav-link">修改主题颜色和样式</a></li><li class="dropdown-item"><!----> <a href="/neutrino-proxy-vuepress/pages/ce175c/" class="nav-link">评论栏</a></li></ul></div></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/db78e2/" class="nav-link">演示</a></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/5d571c/" class="nav-link">案例</a></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/9cc27d/" class="nav-link">最近更新</a></div><div class="nav-item"><a href="/neutrino-proxy-vuepress/pages/1b12ed/" class="nav-link">关于我们</a></div> <a href="https://gitee.com/dromara/neutrino-proxy" target="_blank" rel="noopener noreferrer" class="repo-link">
    Gitee地址
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>快速上手</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/neutrino-proxy-vuepress/pages/793dcb/" class="sidebar-link">快速上手</a></li><li><a href="/neutrino-proxy-vuepress/pages/2f674a/" class="sidebar-link">目录结构</a></li><li><a href="/neutrino-proxy-vuepress/pages/d0d7eb/" aria-current="page" class="active sidebar-link">Markdown 容器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#信息框容器" class="sidebar-link">信息框容器</a></li><li class="sidebar-sub-header level2"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#布局容器" class="sidebar-link">布局容器</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#我是居中的内容" class="sidebar-link">我是居中的内容</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#普通卡片列表" class="sidebar-link">普通卡片列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#语法" class="sidebar-link">语法</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#图文卡片列表" class="sidebar-link">图文卡片列表</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#语法-2" class="sidebar-link">语法</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#增强配置" class="sidebar-link">增强配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#_1-普通卡片和图文卡片容器" class="sidebar-link">1. 普通卡片和图文卡片容器</a></li><li class="sidebar-sub-header level4"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#target" class="sidebar-link">target</a></li><li class="sidebar-sub-header level3"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#_2-图文卡片容器" class="sidebar-link">2. 图文卡片容器</a></li><li class="sidebar-sub-header level4"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#imgheight" class="sidebar-link">imgHeight</a></li><li class="sidebar-sub-header level4"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#objectfit" class="sidebar-link">objectFit</a></li><li class="sidebar-sub-header level4"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#lineclamp" class="sidebar-link">lineClamp</a></li><li class="sidebar-sub-header level3"><a href="/neutrino-proxy-vuepress/pages/d0d7eb/#_3-配置示例" class="sidebar-link">3. 配置示例：</a></li></ul></li></ul></li><li><a href="/neutrino-proxy-vuepress/pages/197691/" class="sidebar-link">Markdown 中使用组件</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>相关文章</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/neutrino-proxy-vuepress/pages/8dfab5/" class="sidebar-link">使目录栏支持h2~h6标题</a></li><li><a href="/neutrino-proxy-vuepress/pages/dd027d/" class="sidebar-link">如何让你的笔记更有表现力</a></li><li><a href="/neutrino-proxy-vuepress/pages/2b8e22/" class="sidebar-link">批量操作front matter工具</a></li><li><a href="/neutrino-proxy-vuepress/pages/0fc1d2/" class="sidebar-link">部署</a></li><li><a href="/neutrino-proxy-vuepress/pages/9ae0bd/" class="sidebar-link">关于写文章和一级标题</a></li><li><a href="/neutrino-proxy-vuepress/pages/26997d/" class="sidebar-link">关于博客搭建与管理</a></li><li><a href="/neutrino-proxy-vuepress/pages/c5a54d/" class="sidebar-link">在线编辑和新增文章的方法</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="placeholder"></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">Markdown 容器<!----></h1> <div class="page-slot page-slot-top">
    <div class="wwads-cn wwads-horizontal page-wwads" data-id="136"></div>
    <style>
      .page-wwads{
        width:100%!important;
        min-height: 0;
        margin: 0;
      }
      .page-wwads .wwads-img img{
        width:80px!important;
      }
      .page-wwads .wwads-poweredby{
        width: 40px;
        position: absolute;
        right: 25px;
        bottom: 3px;
      }
      .wwads-content .wwads-text, .page-wwads .wwads-text{
        height: 100%;
        padding-top: 5px;
        display: block;
      }
  </style>
  </div> <div class="theme-vdoing-content content__default"><p>Markdown 容器是对 Markdown 语法的一个扩展，使用简单的语法就可以在页面中呈现丰富的效果。</p> <p>除了原默认主题自带的容器外，本主题还新增了一些好用的自定义容器。</p> <h2 id="信息框容器"><a href="#信息框容器" class="header-anchor">#</a> 信息框容器</h2> <p><strong>输入</strong></p> <div class="language-md extra-class"><pre class="language-md"><code>::: tip
这是一条提示
:::

::: warning
这是一条注意
:::

::: danger
这是一条警告
:::

::: note
这是笔记容器，在 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Badge</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>v1.5.0 +<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span> 版本才支持哦~
:::
</code></pre></div><p><strong>输出</strong></p> <div class="custom-block tip"><p class="custom-block-title">提示</p> <p>这是一条提示</p></div> <div class="custom-block warning"><p class="custom-block-title">注意</p> <p>这是一条注意</p></div> <div class="custom-block danger"><p class="custom-block-title">警告</p> <p>这是一条警告</p></div> <div class="custom-block note"><p class="custom-block-title">笔记</p> <p>这是笔记容器，在 <span class="badge tip" style="vertical-align:top;" data-v-d5affa18>v1.5.0 +</span> 以上版本才支持哦~</p></div> <p>以上容器均可自定义标题，如：</p> <div class="language- extra-class"><pre class="language-text"><code>::: tip 我的提示
自定义标题的提示框
:::
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">我的提示</p> <p>自定义标题的提示框</p></div> <h2 id="布局容器"><a href="#布局容器" class="header-anchor">#</a> 布局容器  <span class="badge tip" style="vertical-align:top;" data-v-d5affa18>v1.3.3 +</span></h2> <p><strong>输入</strong></p> <div class="language-md extra-class"><pre class="language-md"><code>::: center
  <span class="token title important"><span class="token punctuation">###</span> 我是居中的内容</span>
  （可用于标题、图片等的居中）
:::

::: right
  <span class="token url">[<span class="token content">我是右浮动的内容</span>](<span class="token url">https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B</span>)</span>
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
<span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span>
<span class="token code-block language-js language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'这是一个详情块'</span><span class="token punctuation">)</span></span>
<span class="token punctuation">```</span></span>
:::

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 <span class="token url">[<span class="token content">维基百科</span>](<span class="token url">https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B</span>)</span>
:::
</code></pre></div><p><strong>输出</strong></p> <div class="center-container"><h3 id="我是居中的内容"><a href="#我是居中的内容" class="header-anchor">#</a> 我是居中的内容</h3> <p>（可用于标题、图片等的居中）</p></div><div class="custom-block right"><p><a href="https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B" target="_blank" rel="noopener noreferrer">我是右浮动的内容<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div> <details class="custom-block details"><summary>点击查看</summary> <p>这是一个详情块，在 IE / Edge 中不生效</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'这是一个详情块'</span><span class="token punctuation">)</span>
</code></pre></div></details> <div class="custom-block theorem"><p class="title">牛顿第一定律</p><p>假若施加于某物体的外力为零，则该物体的运动速度不变。</p> <div class="custom-block right"><p>来自 <a href="https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B" target="_blank" rel="noopener noreferrer">维基百科<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></div></div><blockquote><p>注意：<code>right</code>、<code>details</code>、<code>theorem</code>这三个容器在<code>v1.3.0 +</code>版本才支持。<code>center</code>容器在<code>v1.3.3 +</code>版本才支持。</p></blockquote> <h2 id="普通卡片列表"><a href="#普通卡片列表" class="header-anchor">#</a> 普通卡片列表 <span class="badge tip" style="vertical-align:top;" data-v-d5affa18>v1.1.0 +</span></h2> <p>普通卡片列表容器，可用于<code>友情链接</code>、<code>项目推荐</code>、<code>诗词展示</code>等。</p> <p>先来看看效果：</p> <p><strong>输出</strong></p> <div class="cardListContainer"><div class="card-list"><a href="https://www.cnblogs.com/miluluyo/" target="_blank" class="card-item row-3" style="background-color:#CBEAFA;--random-color:#CBEAFA;color:#6854A1;"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg" class="no-zoom"> <div><p class="name">麋鹿鲁哟</p> <p class="desc">大道至简，知易行难</p></div></a> <a href="https://xaoxuu.com" target="_blank" class="card-item row-3" style="background-color:#718971;--random-color:#718971;color:#fff;"><img src="https://fastly.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png" class="no-zoom"> <div><p class="name">XAOXUU</p> <p class="desc">#IOS #Volantis主题作者</p></div></a> <a href="https://reinness.com" target="_blank" class="card-item row-3" style="background-color:#FCDBA0;--random-color:#FCDBA0;color:#A05F2C;"><img src="https://reinness.com/avatar.png" class="no-zoom"> <div><p class="name">平凡的你我</p> <p class="desc">理想成为大牛的小陈同学</p></div></a></div><div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 麋鹿鲁哟
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 大道至简，知易行难
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg <span class="token comment"># 可选</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.cnblogs.com/miluluyo/ <span class="token comment"># 可选</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#CBEAFA'</span> <span class="token comment"># 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#6854A1'</span> <span class="token comment"># 可选，默认var(--textColor)</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> XAOXUU
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> <span class="token string">'#IOS #Volantis主题作者'</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xaoxuu.com
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#718971'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#fff'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 平凡的你我
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 理想成为大牛的小陈同学
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//reinness.com/avatar.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//reinness.com
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#FCDBA0'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#A05F2C'</span>
</code></pre></div></div><p>上面效果在Markdown中的代码是这样的：</p> <p><strong>输入</strong></p> <div class="language-md extra-class"><pre class="language-md"><code>::: cardList
<span class="token code"><span class="token punctuation">```</span><span class="token code-language">yaml</span>
<span class="token code-block language-yaml language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 麋鹿鲁哟
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 大道至简，知易行难
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200122153807.jpg <span class="token comment"># 可选</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//www.cnblogs.com/miluluyo/ <span class="token comment"># 可选</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#CBEAFA'</span> <span class="token comment"># 可选，默认var(--bodyBg)。颜色值有#号时请添加单引号</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#6854A1'</span> <span class="token comment"># 可选，默认var(--textColor)</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> XAOXUU
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> <span class="token string">'#IOS #Volantis主题作者'</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xaoxuu/assets@master/avatar/avatar.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xaoxuu.com
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#718971'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#fff'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 平凡的你我
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 理想成为大牛的小陈同学
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//reinness.com/avatar.png
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//reinness.com
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#FCDBA0'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#A05F2C'</span></span>
<span class="token punctuation">```</span></span>
:::
</code></pre></div><h3 id="语法"><a href="#语法" class="header-anchor">#</a> 语法</h3> <div class="language-md extra-class"><pre class="language-md"><code>::: cardList <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>每行显示数量</span><span class="token punctuation">&gt;</span></span>
<span class="token code"><span class="token punctuation">```</span><span class="token code-language"> yaml</span>
<span class="token code-block language-yaml language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 名称
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg <span class="token comment"># 头像，可选</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx/ <span class="token comment"># 链接，可选</span>
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#CBEAFA'</span> <span class="token comment"># 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#6854A1'</span> <span class="token comment"># 文本色，可选，默认var(--textColor)</span></span>
<span class="token punctuation">```</span></span>
:::
</code></pre></div><ul><li><code>&lt;每行显示数量&gt;</code> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。</li> <li>代码块需指定语言为<code>yaml</code></li> <li>代码块内是一个<code>yaml</code>格式的数组列表</li> <li>数组成员的属性有：
<ul><li><code>name</code>名称</li> <li><code>desc</code>描述</li> <li><code>avatar</code>头像，可选</li> <li><code>link</code>链接，可选</li> <li><code>bgColor</code>背景色，可选，默认<code>var(--bodyBg)</code>。颜色值有<code>#</code>号时请添加引号</li> <li><code>textColor</code>文本色，可选，默认<code>var(--textColor)</code></li></ul></li></ul> <p>下面再来看另外一个示例：</p> <p><strong>输入</strong></p> <div class="language-md extra-class"><pre class="language-md"><code>::: cardList 2
<span class="token code"><span class="token punctuation">```</span><span class="token code-language">yaml</span>
<span class="token code-block language-yaml language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 《静夜思》
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#F0DFB1'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#242A38'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vdoing
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 🚀一款简洁高效的VuePress 知识管理<span class="token important">&amp;博客(blog)</span> 主题
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/xugaoyi/vuepress<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>vdoing
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#DFEEE7'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#2A3344'</span></span>
<span class="token punctuation">```</span></span>
:::
</code></pre></div><p><strong>输出</strong></p> <div class="cardListContainer"><div class="card-list"><span class="card-item row-2" style="background-color:#F0DFB1;--random-color:#F0DFB1;color:#242A38;"><div><p class="name">《静夜思》</p> <p class="desc">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></div></span> <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" class="card-item row-2" style="background-color:#DFEEE7;--random-color:#DFEEE7;color:#2A3344;"><div><p class="name">Vdoing</p> <p class="desc">🚀一款简洁高效的VuePress 知识管理&amp;博客(blog) 主题</p></div></a></div><div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 《静夜思》
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#F0DFB1'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#242A38'</span>
<span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Vdoing
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 🚀一款简洁高效的VuePress 知识管理<span class="token important">&amp;博客(blog)</span> 主题
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//github.com/xugaoyi/vuepress<span class="token punctuation">-</span>theme<span class="token punctuation">-</span>vdoing
  <span class="token key atrule">bgColor</span><span class="token punctuation">:</span> <span class="token string">'#DFEEE7'</span>
  <span class="token key atrule">textColor</span><span class="token punctuation">:</span> <span class="token string">'#2A3344'</span>
</code></pre></div></div><h2 id="图文卡片列表"><a href="#图文卡片列表" class="header-anchor">#</a> 图文卡片列表 <span class="badge tip" style="vertical-align:top;" data-v-d5affa18>v1.1.0 +</span></h2> <p>图文卡片列表容器，可用于<code>项目展示</code>、<code>产品展示</code>等。</p> <p>先看效果：</p> <p><strong>输出</strong></p> <div class="cardImgListContainer"><div class="card-list"><div class="card-item row-3"><a href="https://xugaoyi.com/" target="_blank"><div class="box-img" style="height:auto;"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg" class="no-zoom" style="object-fit:cover;"></div> <div class="box-info"><p class="name">标题</p> <p class="desc" style="-webkit-line-clamp:1;">描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容</p></div> <div class="box-footer"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg" class="no-zoom"> <span>Evan Xu</span></div></a></div> <div class="card-item row-3"><a href="https://xugaoyi.com/" target="_blank"><div class="box-img" style="height:auto;"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg" class="no-zoom" style="object-fit:cover;"></div> <div class="box-info"><p class="name">标题</p> <p class="desc" style="-webkit-line-clamp:1;">描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容</p></div> <div class="box-footer"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg" class="no-zoom"> <span>Evan Xu</span></div></a></div> <div class="card-item row-3"><a href="https://xugaoyi.com/" target="_blank"><div class="box-img" style="height:auto;"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg" class="no-zoom" style="object-fit:cover;"></div> <div class="box-info"><p class="name">标题</p> <p class="desc" style="-webkit-line-clamp:1;">描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容</p></div> <div class="box-footer"><img src="https://fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg" class="no-zoom"> <span>Evan Xu</span></div></a></div></div><div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 <span class="token comment"># 描述，可选</span>
  <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu <span class="token comment"># 作者，可选</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg <span class="token comment"># 头像，可选</span>
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
</code></pre></div></div><p><strong>输入</strong></p> <div class="language-md extra-class"><pre class="language-md"><code>::: cardImgList
<span class="token code"><span class="token punctuation">```</span><span class="token code-language">yaml</span>
<span class="token code-block language-yaml language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 <span class="token comment"># 描述，可选</span>
  <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu <span class="token comment"># 作者，可选</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg <span class="token comment"># 头像，可选</span>
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg
<span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//fastly.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg</span>
<span class="token punctuation">```</span></span>
:::
</code></pre></div><h3 id="语法-2"><a href="#语法-2" class="header-anchor">#</a> 语法</h3> <div class="language-md extra-class"><pre class="language-md"><code>::: cardImgList <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>每行显示数量</span><span class="token punctuation">&gt;</span></span>
<span class="token code"><span class="token punctuation">```</span><span class="token code-language"> yaml</span>
<span class="token code-block language-yaml language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg <span class="token comment"># 图片地址</span>
  <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.com <span class="token comment"># 链接地址</span>
  <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
  <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述 <span class="token comment"># 可选</span>
  <span class="token key atrule">author</span><span class="token punctuation">:</span> 作者名称 <span class="token comment"># 可选</span>
  <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg <span class="token comment"># 作者头像，可选</span></span>
<span class="token punctuation">```</span></span>
:::
</code></pre></div><ul><li><code>&lt;每行显示数量&gt;</code> 数字，表示每行最多显示多少个，选值范围1~4，默认3。在小屏时会根据屏幕宽度减少每行显示数量。</li> <li>代码块需指定语言为<code>yaml</code></li> <li>代码块内是一个<code>yaml</code>格式的数组列表</li> <li>数组成员的属性有：
<ul><li><code>img</code>图片地址</li> <li><code>link</code>链接地址</li> <li><code>name</code>标题</li> <li><code>desc</code>描述，可选</li> <li><code>author</code>作者名称，可选</li> <li><code>avatar</code>作者头像，可选</li></ul></li></ul> <h2 id="增强配置"><a href="#增强配置" class="header-anchor">#</a> 增强配置 <span class="badge tip" style="vertical-align:top;" data-v-d5affa18>v1.9.0 +</span></h2> <p>为了适应更多需求场景，<code>v1.9.0+</code>版本的普通卡片和图文卡片容器添加了一些新的配置：</p> <h3 id="_1-普通卡片和图文卡片容器"><a href="#_1-普通卡片和图文卡片容器" class="header-anchor">#</a> 1. 普通卡片和图文卡片容器</h3> <h4 id="target"><a href="#target" class="header-anchor">#</a> target</h4> <ul><li><p>链接的打开方式，默认<code>_blank</code></p> <ul><li><p><code>_self</code> 当前页面</p></li> <li><p><code>_blank</code> 新窗口打开</p></li></ul></li></ul> <h3 id="_2-图文卡片容器"><a href="#_2-图文卡片容器" class="header-anchor">#</a> 2. 图文卡片容器</h3> <h4 id="imgheight"><a href="#imgheight" class="header-anchor">#</a> imgHeight</h4> <ul><li><p>设置图片高度，默认 <code>auto</code></p> <ul><li>带单位</li></ul></li></ul> <h4 id="objectfit"><a href="#objectfit" class="header-anchor">#</a> objectFit</h4> <ul><li><p>设置图片的填充方式(object-fit)，默认 <code>cover</code></p> <ul><li><code>fill</code> 拉伸 (会改变宽高比)</li> <li><code>contain</code> 缩放 (保持宽高比，会留空)</li> <li><code>cover</code> 填充 (会裁剪)</li> <li><code>none</code> 保持原有尺寸 (会留空或裁剪)</li> <li><code>scale-down</code> 保证显示完整图片 (保持宽高比，会留空)</li></ul></li></ul> <h4 id="lineclamp"><a href="#lineclamp" class="header-anchor">#</a> lineClamp</h4> <ul><li>描述文本超出多少行显示省略号，默认<code>1</code></li></ul> <p>​</p> <h3 id="_3-配置示例"><a href="#_3-配置示例" class="header-anchor">#</a> 3. 配置示例：</h3> <div class="language-yaml extra-class"><pre class="language-yaml"><code><span class="token key atrule">::</span><span class="token punctuation">:</span> cardImgList
``` yaml
<span class="token key atrule">config</span><span class="token punctuation">:</span>
    <span class="token key atrule">target</span><span class="token punctuation">:</span> _blank
    <span class="token key atrule">imgHeight</span><span class="token punctuation">:</span> auto
    <span class="token key atrule">objectFit</span><span class="token punctuation">:</span> cover
    <span class="token key atrule">lineClamp</span><span class="token punctuation">:</span> <span class="token number">1</span>

<span class="token key atrule">data</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> <span class="token key atrule">img</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg
    <span class="token key atrule">link</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xugaoyi.com/
    <span class="token key atrule">name</span><span class="token punctuation">:</span> 标题
    <span class="token key atrule">desc</span><span class="token punctuation">:</span> 描述内容
    <span class="token key atrule">author</span><span class="token punctuation">:</span> Evan Xu
    <span class="token key atrule">avatar</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//xxx.jpg
```
<span class="token key atrule">::</span><span class="token punctuation">:</span>
</code></pre></div></div></div>  <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/03/18, 13:04:58</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/neutrino-proxy-vuepress/pages/2f674a/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">目录结构</div></a> <a href="/neutrino-proxy-vuepress/pages/197691/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">Markdown 中使用组件</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/neutrino-proxy-vuepress/pages/2f674a/" class="prev">目录结构</a></span> <span class="next"><a href="/neutrino-proxy-vuepress/pages/197691/">Markdown 中使用组件</a>→
      </span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="mailto:aoshiguchen@dromara.org" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://gitee.com/dromara/neutrino-proxy" title="Gitee" target="_blank" class="iconfont icon-gitee"></a><a href="https://github.com/aoshiguchen/neutrino-proxy" title="Github" target="_blank" class="iconfont icon-github"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2023-2023
    <span>傲世孤尘 | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"></div></div>
    <script src="/neutrino-proxy-vuepress/assets/js/app.756733d0.js" defer></script><script src="/neutrino-proxy-vuepress/assets/js/2.4ec61f8d.js" defer></script><script src="/neutrino-proxy-vuepress/assets/js/8.91d0a5fc.js" defer></script><script src="/neutrino-proxy-vuepress/assets/js/3.9b2af462.js" defer></script>
  </body>
</html>
